<template>
  <Layout>
    <div class="loss-password-container">
      <div class="form-container">
        <div class="form-header">
          <h2>找回密码</h2>
          <p class="form-description">请输入您的邮箱，我们将发送重置密码的链接</p>
        </div>
        <el-form :model="resetForm" :rules="rules" ref="resetFormRef">
          <el-form-item prop="username">
            <el-input 
              v-model="resetForm.username" 
              placeholder="请输入用户名"
              prefix-icon="User"
              size="large"
            />
          </el-form-item>
          <el-form-item prop="email">
            <el-input 
              v-model="resetForm.email" 
              placeholder="请输入邮箱"
              prefix-icon="Message"
              size="large"
            />
          </el-form-item>

          <el-form-item>
            <el-button 
              type="primary" 
              @click="submitForm" 
              class="submit-btn"
              size="large"
            >
              发送重置链接
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import Layout from '@/components/Layout.vue'
import axios from 'axios'

const resetForm = ref({
  email: '',
  username: ''
})

const resetFormRef = ref(null)

const rules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  if (!resetFormRef.value) return
  
  try {
    await resetFormRef.value.validate()
    const response = await axios.post('http://localhost:9090/api/losspassWord', {
      email: resetForm.value.email,
      username: resetForm.value.username,
      type: 'volunteer'
    })
    if (response.data === '邮件已发送成功') {
      ElMessage.success('密码已发送到您的邮箱')
    } else {
      ElMessage.error('找回密码失败，请检查用户名和邮箱是否正确')
    }
  } catch (error) {
    console.error('找回密码失败:', error)
    ElMessage.error('找回密码失败，请稍后重试')
  }
}
</script>

<style scoped>
.loss-password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px);
  background: #f3eaea;
}

.form-container {
  width: 100%;
  max-width: 400px;
  padding: 40px;
  background-color: #ffffffa2;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.form-container:hover {
  transform: translateY(-5px);
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
}

h2 {
  color: #2c3e50;
  margin-bottom: 16px;
  font-size: 28px;
  font-weight: 600;
}

.form-description {
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.6;
}

.submit-btn {
  width: 100%;
  margin-top: 20px;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:deep(.el-input__inner) {
  height: 44px;
}

:deep(.el-form-item) {
  margin-bottom: 24px;
}
</style>

